<template>
  <el-row :gutter="20">
		<el-col :xl="12" :lg="24">
			<div :id="chartsId" class="my-chart"></div>
		</el-col>
		<el-col :xl="12" :lg="24">
			<div id="chartsIdlt3" class="my-chart"></div>
		</el-col>
	</el-row>
</template>
<style lang="scss" scoped>
 .my-chart{
    margin-top: 50px;
    width: 800px;
    height: 500px;
    box-shadow: 0px 0px 2px 4px #ccc,-0px -0px 2px 4px #ccc;
  }
</style>
<script>
export default {
  props: ['chartsId', 'data', 'keyName'],
  data(){
    return {
      }
  },
  watch: {
    data(){
      this.desc();
    }
  },
  mounted(){
    this.desc(); 
  },
  methods: {
    handleClick(tab, event) {
    },
    desc(){
      console.log('第三个', this.data);
      let cy, dd, hd, qy, rl = [];//柴油，纯电动，混动，汽油，汽油/GNG双燃料
      let lineData;
      if(this.data.sumYearSalesQ){  //判断是否有数据
        let myDataLine = this.data.sumYearSalesQ;
        
        cy = myDataLine.柴油_monthSalesQ;
        dd = myDataLine.纯电动_monthSalesQ;
        hd = myDataLine.汽油混合动力_monthSalesQ;
        qy = myDataLine.汽油_monthSalesQ;
        rl = myDataLine['汽油\/CNG双燃料_monthSalesQ'];
        lineData = this.data.sumYearSalesMY;
      }
      let myChart5 = this.$echarts.init(document.getElementById(this.chartsId));
      let myChartlt2 = this.$echarts.init(document.getElementById('chartsIdlt3'));
      myChart5.setOption({
            title: {
                text: this.keyName
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['汽油','柴油','纯电动', '汽油/GNG双燃料', '汽油混合动力']
            },
            dataZoom: [
              {
                type: 'slider',
                show: true, 
                height: 30, 
                filterMode: 'empty',
                xAxisIndex: [
                    0
                ], 
                bottom:20,
                startValue: qy.length-12,
                endValue:qy.length
              },
              {
                type: 'inside', 
                show: true, 
                height: 15, 
                filterMode: 'empty',
                xAxisIndex: [
                    0
                ], 
                startValue: qy.length-12,
                endValue:qy.length
              }
            ], 
            grid: {
                bottom: 100,
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: function(){
                    let list = [];
                    let year = new Date('2017-12').getFullYear();//当前年
                    let month = new Date('2017-12').getMonth()+1;//当前月
                    //生成x轴坐标
                    list.unshift(year + '-' + month);
                    for(let i = 1; i < 24; i++){
                      if((month-1)%12 == 0) --year;
                      month = Math.abs((month-1) % 12);
                      
                      if(month == 0) month = 12;
                      let item = year + '-' + month;
                      list.unshift(item);
                    }
                    return list;
                }(),
                axisLabel: {
                  interval: 0,
                  rotate: -30
                }
            },
            
            yAxis: {
                type: 'value',
                max: 100,
                axisLabel: {
                  formatter: '{value} %'
              }
            },
            series: [
                {
                    name:'汽油',
                    type:'bar',
                    stack: '总量',
                    barWidth: 20,
                    data:qy
                },
                {
                    name:'柴油',
                    type:'bar',
                    stack: '总量',
                    barWidth: 20,
                    data:cy
                },
                {
                    name:'纯电动',
                    type:'bar',
                    stack: '总量',
                    barWidth: 20,
                    data:dd
                },
                {
                    name:'汽油/GNG双燃料',
                    type:'bar',
                    stack: '总量',
                    barWidth: 20,
                    data:rl
                },
                {
                    name:'汽油混合动力',
                    type:'bar',
                    stack: '总量',
                    barWidth: 20,
                    data:hd
                }
            ]
        });
        myChartlt2.setOption({
          title: {
            text: '燃料类型同、环比变化图'
          },
          tooltip:{
            trigger: 'axis'
          },
          legend: {
            data: ['汽油_MOM', '汽油_YOY', '柴油_MOM', '柴油_YOY', '纯电动_MOM', '纯电动_YOY', '汽油/GNG双燃料_MOM', '汽油/GNG双燃料_YOY', '汽油混合动力_MOM', '汽油混合动力_YOY'],
            top: 30,
            left: 'center'
          },
          dataZoom: [
            {
                type: 'slider',
                show: true, 
                height: 30, 
                filterMode: 'empty',
                xAxisIndex: [
                    0
                ], 
                bottom:20,
                startValue: qy.length-12,
                endValue:qy.length
              },
              {
                type: 'inside', 
                show: true, 
                height: 15, 
                filterMode: 'empty',
                xAxisIndex: [
                    0
                ], 
                startValue: qy.length-12,
                endValue:qy.length
              }
          ],
          grid: {
            top: 100,
            bottom: 100
          },
          xAxis: {
            type: 'category',
            data: function(){
                let list = [];
                let year = new Date('2017-12').getFullYear();//当前年
                let month = new Date('2017-12').getMonth()+1;//当前月
                //生成x轴坐标
                list.unshift(year + '-' + month);
                for(let i = 1; i < 24; i++){
                  if((month-1)%12 == 0) --year;
                  month = Math.abs((month-1) % 12);
                  
                  if(month == 0) month = 12;
                  let item = year + '-' + month;
                  list.unshift(item);
                }
                return list;
            }(),
            axisLabel: {
              interval: 0,
              rotate: -30
            }
          },
          yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value} %'
              }
          },
          series: [
            {
              name:'汽油_MOM',
              type:'line',
              stack: '总量0',
              data: lineData.汽油_MOM
            },
            {
              name:'汽油_YOY',
              type:'line',
              stack: '总量1',
              data:lineData.汽油_YOY
            },
            {
              name:'柴油_MOM',
              type:'line',
              stack: '总量2',
              data:lineData.柴油_MOM
            },
            {
              name:'柴油_YOY',
              type:'line',
              stack: '总量3',
              data:lineData.柴油_YOY
            },
            {
              name:'纯电动_MOM',
              type:'line',
              stack: '总量4',
              data:lineData.纯电动_MOM
            },
            {
              name:'纯电动_YOY',
              type:'line',
              stack: '总量5',
              data:lineData.纯电动_YOY
            },
            {
              name:'汽油/GNG双燃料_MOM',
              type:'line',
              stack: '总量6',
              data:lineData['汽油\/CNG双燃料_MOM']
            },
            {
              name:'汽油/GNG双燃料_YOY',
              type:'line',
              stack: '总量7',
              data:lineData['汽油\/CNG双燃料_YOY']
            },
            {
              name:'汽油混合动力_MOM',
              type:'line',
              stack: '总量8',
              data:lineData.汽油混合动力_MOM
            },
            {
              name:'汽油混合动力_YOY',
              type:'line',
              stack: '总量9',
              data:lineData.汽油混合动力_YOY
            }
          ]
        })

    }
  }
}
</script>
